<template>
    <div class="exam-wrap">
        <header class="time">
            <p>剩余{{examtime}}</p>
        </header>
        <div class="main clearfix">
            
            <div class="test-main fl">
                <div class="title" ref="titbox">
                    <p class="title-sign">
                        <span>{{nowType == '㊔'?'单选': nowType == '㊌'?'多选':nowType == '㊋'?'是非':nowType == '㊏'?'名词解释':nowType == '㊕'?'填空':nowType == '㊐'?'简答':nowType == '㊊'?'阅读理解':nowType == '㊎'?'单选共用题干':'单选共用备用答案'}}</span>
                        {{nowTitle}}
                    </p>
                </div>
                <div class="option-choose">
                    <mt-radio :options="nowType == '㊔' ? nowOptions: judgeOptions" @change="changes($event,1)" v-model="answerVal" v-if="nowType == '㊔' || nowType == '㊋'"></mt-radio>
                    <mt-checklist :options="nowOptions" @change="changes($event,2)" v-model="answerArr" v-if="nowType == '㊌'"></mt-checklist>
                    <mt-field v-if="nowType == '㊏' || nowType == '㊐'" label="答案" placeholder="请输入" type="textarea" rows="4" v-model="textareaVal" @input="changes($event,3)"></mt-field>
                    <mt-field v-for="(item,index) in supplynum" :key="index" v-if="nowType == '㊕'" :label="'答案' + (index + 1)" placeholder="请输入" v-model="supplyVal[index]" @input="changes($event,4)"></mt-field>

                    <!-- 多题 -->
                    <div class="more-box" v-for="(item,index) in moredataList" :key="index+10" v-if="nowType == '㊎' || nowType == '㊍' || nowType == '㊊'">
                        <!-- 多题时题目 -->
                        <p class="moretitle title-sign"><span style="font-size: 12px;margin-right: 3px;background-color: #f47023;">{{item.type == '㊔'?'单选': item.type == '㊌'?'多选':item.type == '㊋'?'是非':item.type == '㊏'?'名词解释':item.type == '㊕'?'填空':item.type == '㊐'?'简答':item.type == '㊊'?'阅读理解':item.type == '㊎'?'单选':'单选'}}</span>{{index+1}}.{{item.question}}</p>
                        <!-- 多题时选项 -->
                        <div class="choose-box">
                            <div v-if="nowType == '㊎' || nowType == '㊍'">
                                <mt-radio  v-if="nowType == '㊎' || nowType == '㊍'" :options="item.options" :name="'aa' + index" @change="changes($event,1)" v-model="choosearr[index]"></mt-radio>
                            </div>
                            <div v-if="nowType == '㊊'">
                                <mt-radio  v-if="item.type == '㊔' || item.type == '㊋'" :options="item.options" :name="'aa' + index" @change="changes($event,5)" v-model="choosearr[index]"></mt-radio>
                                <mt-checklist v-if="item.type == '㊌'" :options="item.options" @change="changes($event,6)" v-model="choosemorearr[index]"></mt-checklist>
                                <mt-field style="padding-top: 10px;" v-if="item.type == '㊏' || item.type == '㊐'" label="答案" placeholder="请输入" type="textarea" rows="4" v-model="textareaVal" @input="changes($event,7)"></mt-field>
                                <mt-field style="padding-top: 10px;" v-for="(item,index) in supplynum" :key="index" v-if="item.type == '㊕'" :label="'答案' + (index + 1)" placeholder="请输入" v-model="supplyVal[index]" @input="changes($event,8)"></mt-field>
                            </div>
                            
                        </div>
                    </div>
                    
                </div>

            </div>

        </div>
        <div class="btn-box">
            <mt-button type="primary" size="large" v-if="nowNum != answerlistArr.length" :disabled="nowNum == 1? true: false" @click="prevtest">&lt; 上一题</mt-button>
            <mt-button type="primary" size="large" v-if="nowNum != answerlistArr.length" :disabled="nowNum == answerlistArr.length? true: false" @click="nexttest">下一题 &gt;</mt-button>
            <mt-button type="danger" size="large" v-if="nowNum == answerlistArr.length" @click="submit">提交</mt-button>
        </div>

        <div class="test-sign">
            <ul class="slide-page">
                <li v-for="(item,index) in answerlistArr.length" :key="index"  @click="subchanges(index+1)" :class="index+1 == nowNum?'signactive':''">{{index+1}}</li>
            </ul>
        </div>

    </div>
</template>

<style>
    /* html,body,#app{} */
    .exam-wrap{padding: 0px 0px 20px;}
    .time{font-size: 16px;text-align: center;height: 7%;display: flex;justify-content:center;align-items:Center; }
    .slide-box{height: 93%;}
    .mint-cell-wrapper{padding: 0;text-align: left;}
    .swiper-container-horizontal .slider-pagination-bullet-active, .swiper-container-vertical .slider-pagination-bullet-active{background: #26a2ff none repeat scroll 0 0;}
    .main{padding: 0px 15px;position: relative;}
    .test-main{width: 90%;}
    .title-sign{padding: 0px 3px 0px 0px;line-height: 1.5em;}
    .title-sign>span{background-color: #ef4f4f;color: #fff;padding: 3px;border-radius: 5px;}
    .test-sign{width: 10%;position: fixed;right: 15px;top: 50%;margin-top: -150px;}
    .option-choose{padding: 10px 0px;}
    .btn-box{text-align: center;padding-top: 30px;}
    .btn-box button{width: 32%;display: inline-block;margin: 0 2%;}
    .slide-page{overflow-y: scroll;height: 250px;}            
    .slide-page>li{width: 20px;height: 20px;line-height: 20px;border-radius: 50%;text-align: center;margin: 10px auto;background: rgba(0,0,0,.2);}
    .slide-page>li.signactive{background:#26a2ff;color: #fff;}
    .title-text{text-align: left;}
    .more-box{padding: 10px 0px;}
</style>

<script>
    import conf from '../config/userconf.js'
    export default {
        name:"exam",
        data() {
            return {
                worker: null,   //vue-worker把复杂的web worker封装起来    二线程
                titcontwidth: '',  //标题内容宽度
                nowTitle: '',  //当前题标题
                nowType: '',  //当前题类型 单选题共用题干㊎ 单选题共用备用答案㊍ 多选题㊌ 是非题㊋ 名词解释㊏ 填空题㊕  问答题㊐ 单选题㊔ 阅读理解㊊
                nowOptions: [],  //当前题选项（单选、多选）
                nowsingleOptions: {},  //单选题共用题干  当前题选项（单选）
                judgeOptions: [  //当前题选项（判断）
                    {label: '正确',value: 'A'},
                    {label: '错误',value: 'B'},
                ],
                nowNum: 1, //当前题号
                answerlistArr: [],  //已做题的答案
                answerVal: '',  //答案值字符串（单选）
                answerArr: [],  //答案值数组（多选）
                questionList: [],  //所有题目
                textareaVal: '',  //名词解释、填空、简答  答案
                supplyVal: [],  //填空  答案值
                examtime: '',  //考试剩余时间
                totaltimer: '',  //考试总时长
                supplynum: 0,  //填空题的答案个数
                // initdataList: [],  //初始数据  
                moredataList: [],  //多题数据 
                choosearr: [],
                choosemorearr: [],
                // moretitle: '',  //多题题干
                // moredatachooseArr: [],  //阅读理解多选题  v-model的数据
            };
        },
        methods: {
            //初始化页面数据处理
            init(data=Object()) {
                
                data.id = this.$route.query.id;  //试卷id
                conf.exams.questionlistpaper(data,(state,res)=>{
                    if (state == 'success'&&res.data.status == 1){
                        // console.log(res.data);
                        this.questionList = res.data.other.list;
                        console.log(this.questionList);
                        
                        //单选题共用题干㊎ 单选题共用备用答案㊍ 多选题㊌ 是非题㊋ 名词解释㊏ 填空题㊕  问答题㊐ 单选题㊔ 阅读理解㊊
                        
                        //默认给第一题赋值
                        if(this.questionList[0].type != '㊊'){  //阅读理解
                            this.nowTitle = this.questionList[0].content[0].question;  //题目
                            this.nowType = this.questionList[0].type;  //题型
                            if(this.questionList[0].type == '㊔' || this.questionList[0].type == '㊌'){  //单选题、多选题
                                this.nowOptions = this.questionList[0].content[0].options;  //选项
                            }
                            if(this.questionList[0].type == '㊕'){  //填空题
                                this.supplynum = this.questionList[0].content[0].num;  //答案个数
                            }
                            if(this.questionList[0].type == '㊎'){  //单选题共用题干  当前题选项（单选）
                                this.nowTitle = this.questionList[0].description;  //多题题干
                                this.moredataList = this.questionList[0].content;  //多题数据
                            }
                            if(this.questionList[0].type == '㊍'){  //单选题共用备用答案  当前题选项（单选）
                                this.nowTitle = '';
                                this.moredataList = this.questionList[0].content;  //多题数据
                            }
   
                        }else{
                            this.nowTitle = this.questionList[0].questions[0].title;  //题目
                            this.nowType = this.questionList[0].questions[0].type;  //题型
                            //构造   阅读理解  子题题型为 多选
                            // for(var i=0; i<this.questionList[0].content.length;i++){
                            //     if(this.questionList[0].content[i].type == '㊌'){
                            //         this.moredatachooseArr.push([]);
                            //     }
                            // }
                        }

                        //构造需要提交的默认数据
                        for(var i=0; i<res.data.other.list.length;i++){

                            if(res.data.other.list[i].type == '㊌' || res.data.other.list[i].type == '㊋' || res.data.other.list[i].type == '㊏' || res.data.other.list[i].type == '㊐' || res.data.other.list[i].type == '㊔'){
                                
                                this.answerlistArr.push({id: res.data.other.list[i].id,answer: '',type:res.data.other.list[i].type});

                            }else if(res.data.other.list[i].type == '㊕' || res.data.other.list[i].type == '㊎' || res.data.other.list[i].type == '㊍'){
                                
                                this.answerlistArr.push({id: res.data.other.list[i].id,answer: [],type:res.data.other.list[i].type});
                            
                            }else if(res.data.other.list[i].type == '㊊'){
                                var dataarr = [];
                                for(var j=0; j<res.data.other.list[i].content.length;j++){

                                    if(res.data.other.list[i].content[j].type == '㊌' || res.data.other.list[i].content[j].type == '㊋' || res.data.other.list[i].content[j].type == '㊏' || res.data.other.list[i].content[j].type == '㊐' || res.data.other.list[i].content[j].type == '㊔'){
                                        dataarr.push({type: res.data.other.list[i].content[j].type,answer: ''});
                                    }else if(res.data.other.list[i].content[j].type == '㊕'){
                                        dataarr.push({type: res.data.other.list[i].content[j].type,answer: []});
                                    }
                                    
                                }
                                this.answerlistArr.push(dataarr);
                            }
                        }

                        console.log(this.answerlistArr);
                    }else if(state == 'success'&&res.data.status != 1){
                        this.$toast(res.data.message);
                    }
                })

            },
            //change
            changes(val,sign){
                // console.log(this.choosearr);
                // console.log(this.choosemorearr);
                
                console.log(val,sign);
                if(sign == 1 || sign == 3){  // 1 单选题、是非题           3 名词解释、问答题
                    this.answerlistArr[this.nowNum - 1].answer = val;
                }else if(sign == 2){  //多选题
                    this.answerlistArr[this.nowNum - 1].answer = val.join('');  //数组转字符串
                }else if(sign == 4){  //填空题
                    console.log(this.supplyVal);
                    this.answerlistArr[this.nowNum - 1].answer = this.supplyVal;
                }
            },
            //上一题
            prevtest(){
                this.managedata(this.nowNum-1,0);  
            },
            //下一题
            nexttest(){
                this.managedata(this.nowNum,1);
            },
            //切换题号
            subchanges(ind){
                this.managedata(ind-1,2);
            },
            //通用处理数据函数
            managedata(sub,type){
                
                if(this.questionList[sub].type != '㊊'){
                    this.nowTitle = this.questionList[sub].content[0].question;  //题目
                    if(this.questionList[sub].type == '㊔' || this.questionList[sub].type == '㊌'){
                        this.nowOptions = this.questionList[sub].content[0].options;  //选项
                    }

                    if(this.questionList[sub].type == '㊕'){  //填空题
                        this.supplynum = this.questionList[sub].content[0].num;  //答案个数
                    }

                    if(this.questionList[sub].type == '㊎'){  //单选题共用题干  当前题选项（单选）
                        this.nowTitle = this.questionList[sub].description;  //多题题干
                        this.moredataList = this.questionList[sub].content;  //多题数据
                    }

                    if(this.questionList[sub].type == '㊍'){  //单选题共用备用答案  当前题选项（单选）
                        this.nowTitle = '';
                        this.moredataList = this.questionList[sub].content;  //多题数据
                    }
                    

                    this.nowType = this.questionList[sub].type;  //题型
                    if(type == 0){  //type 0为上一题，1为下一题，2为跳转
                        this.nowNum--;  //题号
                    }else if(type == 1){
                        this.nowNum++;  //题号
                    }else if(type == 2){
                        this.nowNum = sub+1;  //题号
                    }
                    
                }else{
                    console.log('9999999999');

                    this.questionList[sub].description = this.replaceUrlToElement(this.questionList[sub].description);

                    console.log(this.questionList[sub].description);
                    this.nowTitle = this.questionList[sub].description;  //题目
                    this.moredataList = this.questionList[sub].content;  //多题数据
                    console.log(this.moredataList);
                    this.nowType = this.questionList[sub].type;  //题型
                    this.nowNum++;  //题号
                }


                // 1 单选 2 多选 3 是非题 4 名词解释 5 填空  6 简答 7 阅读理解
                //单选题共用题干㊎ 单选题共用备用答案㊍ 多选题㊌ 是非题㊋ 名词解释㊏ 填空题㊕  问答题㊐ 单选题㊔ 阅读理解㊊

                //赋值已选/填的答案
                if(this.answerlistArr[sub].answer){

                    if(this.questionList[sub].type == '㊔' || this.questionList[sub].type == '㊋'){  //单选、判断
                        this.answerVal = this.answerlistArr[sub].answer;
                    }else if(this.questionList[sub].type == '㊌'){
                        this.answerArr = this.answerlistArr[sub].answer.split('');
                    }else if(this.questionList[sub].type == '㊏' || this.questionList[sub].type == '㊐'){
                        this.textareaVal = this.answerlistArr[sub].answer;
                    }else if(this.questionList[sub].type == '㊕'){
                        this.supplyVal = this.answerlistArr[sub].answer;
                    }

                }else{
                    //切换时，重置答案（因为答案绑定的值是共用的）
                    this.answerVal = '';
                    this.answerArr = [];
                    this.choosearr = [];
                    this.choosemorearr = [];
                    this.textareaVal = '';
                }
            },
            //时间秒数格式化  时间戳（单位：秒）  格式化后的时分秒
            sec_to_time(s) {
                var t;
                if(s > 0){
                    var hour = Math.floor(s/3600);
                    var min = Math.floor(s/60) % 60;
                    var sec = s-(hour*3600+min*60);
                    if(hour < 10) {
                        t = '0'+ hour + ":";
                    } else {
                        t = hour + ":";
                    }

                    if(min < 10){t += "0";}
                    t += min + ":";
                    if(sec < 10){t += "0";}
                    t += sec;
                }
                return t;
            },
            //倒计时
            countdown(){
                this.worker.postMessage('pull-data', [this.totaltimer--])
                    .then(res => {
                        // console.log(res);
                        if(res){
                            // res--;
                            console.log(res);
                            if(res < 0){
                                //考试时间到
                            }else{
                                this.examtime = this.sec_to_time(this.totaltimer);
                            }
                        }
                    })

                // this.totaltimer--;
                // // console.log(this.totaltimer);
                // if(this.totaltimer < 0){
                //     //考试时间到
                // }else{
                //     this.examtime = this.sec_to_time(this.totaltimer);
                // }

            },
            //处理阅读理解题干
            replaceUrlToElement(content){
                var rVideo = /㊞(.*)?㊡/g;
                var rAudio = /㊗(.*)?㊡/g;
                var rImage = /㊟(.*)?㊡/g;
                // var v = content.match(rVideo), a = content.match(rAudio), i = content.match(rImage);
                var v = rVideo.exec(content), a = rAudio.exec(content), i = rImage.exec(content);
                console.log(v.length,a.length,i.length);
                console.log(v,a,i);
                if (v != null) {
                    for(var x=0; x < v.length; x++){
                        content = content.replace(v[x], "<video width='500' height='500'  controls='controls' src='"+v[x].substring(1,v[x].length-1)+"'></video>");
                    }
                }
                if (a != null) {
                    for(var y=0; y < a.length; y++){
                        content = content.replace(a[y], "<audio controls= 'controls' src='"+a[y].substring(1,a[y].length-1)+"'></audio>");
                    }
                }
                
                if (i != null) {
                    for(var z=0; z < i.length; z++){
                        content = content.replace(i[z], "<img src='"+i[z].substring(1,i[z].length-1)+"'>");
                    }
                }
                    
                return content;
            },
            //提交
            submit(){
                console.log(this.answerlistArr);
            },

        },
        mounted (){
            this.init();
            
        }, 
        destroyed() {
            // 通过赋值null的方式，释放掉worker引用，这样就可以关闭worker，这是作者在github上说的
            // this.worker = null
            
        },
        
    }
</script>